<template>
  <header>
    <Dropdown ref="tooltipRef" :menu-options="menuOptions" placement="bottom" trigger="click" manual
      @visible-change="e => inlineConsole('visibled change', e)" @select="e => inlineConsole('select', e)">
      <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    </Dropdown>

    <Tooltip ref="tooltipRef1" placement="right" :popper-options="options">
      <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
      <template #content>
        <h1>hello tooltip</h1>
      </template>
    </Tooltip>

    <div class="wrapper">
      <a href="#">this is a</a>
    </div>
  </header>

  <main>
    <Button @click="clickButton">Test Button</Button>
    <Button @click="open">Test Button</Button>
    <Button round @click="close">Round Button</Button>
    <Button>Vk</Button>
    <Button disabled>Disabled Button</Button>
    <br>
    <br>
    <Button ref="buttonRef" type="primary">Test Button</Button>
    <Button type="danger">Test Button</Button>
    <Button type="success">Round Button</Button>
    <Button type="warning">Vk</Button>
    <Button type="info">Disabled Button</Button>
    <br>
    <br>
    <Button plain type="primary">Test Button</Button>
    <Button plain type="danger">Test Button</Button>
    <Button plain type="success">Round Button</Button>
    <Button plain type="warning">Vk</Button>
    <Button plain type="info">Disabled Button</Button>
    <br>
    <br>
    <Button size="large" type="primary">Test Button</Button>
    <Button size="small" type="primary">Test Button</Button>
    <br>
    <br>
    <Button size="large" loading>loading</Button>
    <Button size="large" icon="fa-solid fa-user-secret">icon</Button>
    <br>
    <br>

    <Collapse v-model="openedValue" accordion>
      <CollapseItem name="a">
        <template #title>
          <h1>title a</h1>
        </template>
        <h1>headline title</h1>
        <div> this is content a aaa </div>
      </CollapseItem>
      <CollapseItem name="b" title="title b">
        <div> this is bbbbb test </div>
      </CollapseItem>
      <CollapseItem name="c" title="title c disabled" disabled>
        <div> this isycccc test </div>
      </CollapseItem>
    </Collapse>

    <Icon icon="fa-solid fa-user-secret" size="2xl" spin type="danger" color="#0e7a0d" />

    <Alert title="成功提示的文案" type="success" center show-icon />
    <Alert title="消息提示的文案" type="info" show-icon @close="clickButton" center />
    <Alert title="警告提示的文案" type="warning" :closable="false" show-icon />
    <Alert title="错误提示的文案" type="error" show-icon
      description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……" />
    <br>
    <Alert title="成功提示的文案" type="success" effect="dark" />
    <Alert title="消息提示的文案" type="info" effect="dark" show-icon description="描述性文字" />
    <Alert title="警告提示的文案" type="warning" effect="dark" />
    <Alert title="错误提示的文案" type="error" effect="dark" />
    <br>
    <Alert title="默认提示的文案" close-text="我知道了" show-icon />

    <!-- <Message message="hello message" :duration="0" show-close /> -->
  </main>
</template>

<script setup lang="ts">
import { h, onMounted, ref } from 'vue'
import Button from './components/Button/Button.vue'
import Collapse from './components/Collapse/Collapse.vue'
import CollapseItem from './components/Collapse/CollapseItem.vue'
import Icon from './components/Icon/Icon.vue'
import type { ButtonInstance } from './components/Button/types'
import Alert from './components/Alert/Alert.vue'
import Tooltip from '@/components/Tooltip/Tooltip.vue'
import type { TooltipInstance } from './components/Tooltip/types'
import type { Options } from '@popperjs/core'
import Dropdown from './components/Dropdown/Dropdown'
import type { MenuOption } from './components/Dropdown/types'
import { createMessage } from './components/Message/method'
// import Message from './components/Message/Message.vue'

const buttonRef = ref<ButtonInstance | null>(null)

const openedValue = ref([])

onMounted(() => {
  if (buttonRef.value) {
    console.info(buttonRef.value.ref)
  }
  createMessage({ message: 'hello message', duration: 0, showClose: true, type: 'info' })
  createMessage({ message: 'hello message 2', type: 'success' })
  createMessage({ message: 'hello message 3', duration: 2000, type: 'warning' })
  createMessage({ message: 'hello message 4', duration: 0, type: "danger", showClose: true })
  createMessage({ message: 'hello message' })
})

const clickButton = () => {
  createMessage({ message: 'hello message click add', duration: 0, type: "danger", showClose: true })
}

const tooltipRef = ref<TooltipInstance | null>(null)
const open = () => {
  tooltipRef.value?.show()
}
const close = () => {
  tooltipRef.value?.hide()
}
const options: Partial<Options> = { placement: 'right', strategy: 'fixed' }

const menuOptions: MenuOption[] = [
  { key: 1, label: h('h2', 'this is h2') },
  { key: 2, label: 'item2', disabled: true },
  { key: 3, label: 'item3', divided: true },
  { key: 4, label: 'item4' },
]

const inlineConsole = (...args: any) => {
  console.log(...args)
}
</script>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
